<template>
  <div class="flex flex-col w-full items-center">
    <el-col class="border">
      <el-row class="items-center" style="margin: 12px; align-items: center">
        <div style="width: 540px; margin: 8px">
          <el-carousel :interval="5000" arrow="always">
            <el-carousel-item>
              <img class="h-full" src="../assets/img/img.png" alt="" />
            </el-carousel-item>
            <el-carousel-item>
              <img class="h-full" src="../assets/img/img.png" alt="" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div style="width: 540px; margin: 8px">
          <tabsCard :types="['行业动态', '公示公告', '政策法规']" />
        </div>
      </el-row>
      <el-row class="row" style="justify-content: space-around; margin: 12px">
        <articleCard
          type="通知公告"
          title="通知公告"
          style="width: 350px; margin: 4px"
        />
        <articleCard
          type="示范推广"
          title="示范推广"
          style="width: 350px; margin: 4px"
        />
        <articleCard
          type="招商信息"
          title="招商信息"
          style="width: 350px; margin: 4px"
        />
      </el-row>
    </el-col>
  </div>
</template>

<script setup lang="ts">
import tabsCard from './tabsCard.vue'
import articleCard from './articleCard.vue'
</script>

<style lang="scss" scoped>
.home {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--c-text);
  padding: calc(var(--w-space) * 3) 0;
  margin: 0 auto;
}
</style>
